<template>
	<view>
		<scroll-view scroll-y="true" class="scrollContent" :enhanced="true" :bounces="false" :show-scrollbar="false">
			<view class="order_container">
				<uni-nav-bar class="uni-nav-bar" :fixed="true" background-color="#ffffff" status-bar left-icon="left"
					title="订单详情" @clickLeft="goBackToOrderList()" />

				<view class="content w100p mt15 mb10">
					<view class="d-flex flex-column j-sb content_item">
						<view class="d-flex a-center mb15">
							<view class="line mr10"></view>
							<view class="title">订单基本信息</view>
						</view>
						<view class="d-flex a-center j-sb mb10">
							<view class="title_item">订单单号</view>
							<view class="value_item">{{orderDetailData.order.orderCode || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb mb10">
							<view class="title_item">订单属性</view>
							<view class="value_item">{{orderTypeList[orderDetailData.order.orderType].name}}</view>
						</view>
						<view class="d-flex a-center j-sb mb10">
							<view class="title_item">订单总额</view>
							<view class="value_item">{{orderDetailData.order.orderAmount || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb mb10">
							<view class="title_item">折扣金额</view>
							<view class="value_item">{{orderDetailData.order.orderDiscount || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb mb10">
							<view class="title_item">实付总额</view>
							<view class="value_item">{{orderDetailData.order.actuallyAmount || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb mb10">
							<view class="title_item">订单状态</view>
							<u-tag plain size="mini" :text="payStatusList[orderDetailData.order.payStatus].name"
								:type="payStatusList[orderDetailData.order.payStatus].type"></u-tag>
						</view>
						<view class="d-flex a-center j-sb mb10">
							<view class="title_item">配送方式</view>
							<view class="value_item">{{orderDetailData.order.deliveryMethod==0?'上门':'到店取'}}</view>
						</view>
						<view class="d-flex a-center j-sb mb10">
							<view class="title_item">支付时间</view>
							<view class="value_item">{{orderDetailData.order.payDate || praseStrEmpty}}</view>
						</view>
						<view class="d-flex a-center j-sb">
							<view class="title_item">创建时间</view>
							<view class="value_item">{{orderDetailData.order.createTime || praseStrEmpty}}</view>
						</view>
					</view>
				</view>

				<view class="time mb10" v-if="orderDetailData.order.reserveDate">
					<view class="d-flex flex-column j-sb time_box">
						<view class="d-flex a-center mb15">
							<view class="line mr10"></view>
							<view class="title">预约上门时间</view>
						</view>
						<view class="d-flex a-center j-sb">
							<view class="title_item">上门时间</view>
							<view class="value_item">{{orderDetailData.order.reserveDate}}</view>
						</view>
					</view>
				</view>

				<view class="address mb10" v-if="orderDetailData.address.addressCode">
					<view class="d-flex flex-column j-sb address_box">
						<view class="d-flex a-center mb15">
							<view class="line mr10"></view>
							<view class="title">收货地址</view>
						</view>
						<view class="d-flex a-center j-sb mb10">
							<view class="title_item">收货人</view>
							<view class="value_item">{{orderDetailData.address.receiverName}}</view>
						</view>
						<view class="d-flex a-center j-sb mb10">
							<view class="title_item">手机号</view>
							<view class="value_item">{{orderDetailData.address.receiverPhone}}</view>
						</view>
						<view class="d-flex a-center j-sb">
							<view class="title_item">详细地址</view>
							<view class="value_item">{{orderDetailData.address.receiverArea}}{{orderDetailData.address.detailAdress}}
							</view>
						</view>
					</view>
				</view>

				<view class="center mb20">
					<view class="center_box">
						<view class="d-flex a-center mb10">
							<view class="line mr10"></view>
							<view class="title">订单商品信息</view>
						</view>
						<view>
							<view class="center_content d-flex w100p mb10 pb10" v-for="item in orderDetailData.itemList"
								:key="item.productCode">
								<view>
									<u--image :src="item.picUrl.split('&')[0]" width="160rpx" height="160rpx"></u--image>
								</view>
								<view class="d-flex flex-column j-sb ml10" style="width:520rpx">
									<view class="pro_name">{{item.productName}}</view>
									<view class="d-flex a-center j-sb">
										<view class="pro_name">x{{item.stock}}</view>
										<view class="pro_amout">{{item.itemAmout}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="pay" v-if="orderDetailData.order.payStatus == 0">
					<view class="pay_box d-flex a-center j-sa">
						<!-- <u-button color="#999999" text="取消"></u-button> -->
						<u-button color="#77c7a2" text="支付" @click="prePayOrderByCustomerApp()"></u-button>
					</view>
				</view>

				<u-popup :show="popupShow" closeable="true" closeIconPos="top-right" @open="popupShow = true"
					@close="closePopup">
					<view class="myPopup">
						<view class="mb10">
							<view class="content_item d-flex flex-column j-sb">
								<view class="d-flex a-center j-sb mb10">
									<view>客户名称</view>
									<view>{{goods_info.customerName}}</view>
								</view>
								<view class="d-flex a-center j-sb mb10">
									<view>客户等级</view>
									<view>{{goods_info.levelName}}</view>
								</view>
								<view class="d-flex a-center j-sb mb10">
									<view>钱包余额</view>
									<view>{{goods_info.remaingAmount}}</view>
								</view>
								<view class="d-flex a-center j-sb mb10">
									<view>订单总额</view>
									<view>{{goods_info.orderAmount}}</view>
								</view>
								<view class="d-flex a-center j-sb mb10">
									<view>折扣金额</view>
									<view>{{goods_info.discountAmount}}</view>
								</view>
								<view class="d-flex a-center j-sb mb10">
									<view>实付总额</view>
									<view>{{goods_info.realAmount}}</view>
								</view>
							</view>
						</view>
						<view class="d-flex a-center j-center mt20 mb20 mybutton">
							<u-button type="primary" color="#38D19A" text="立即支付" @click="instantlyPayPage()"></u-button>
						</view>
					</view>
				</u-popup>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		queryOrderDetailByApp,
		prePayOrderByCustomerApp,
		balancePaymentByApp
	} from "@/api/index.js"

	export default {
		onReady() {
			// 隐藏导航栏
			// uni.hideTabBar({});
		},
		onShow() {
			// this.queryOrderDetailByApp()
			// this.userInfo = uni.getStorageSync('userInfo')
		},
		onLoad(opt) {
			if (opt.orderCode) {
				this.orderCode = opt.orderCode
			}

			this.queryOrderDetailByApp()
		},
		data() {
			return {
				orderCode: "",
				orderDetailData: {},
				orderTypeList: [{
						name: "预约单"
					},
					{
						name: "在线支付单"
					},
					{
						name: "门店订单"
					}
				],
				payStatusList: [{
						name: "待支付",
						type: "error"
					},
					{
						name: "已支付",
						type: "success"
					}
				],
				userInfo: uni.getStorageSync('userInfo'),
				goods_info: {},
				popupShow: false
			}
		},
		methods: {
			queryOrderDetailByApp() {
				const that = this
				queryOrderDetailByApp({
					orderCode: that.orderCode,
				}).then(res => {
					that.orderDetailData = res.object
				})
			},

			prePayOrderByCustomerApp() {
				const that = this
				prePayOrderByCustomerApp({
					orderCode: that.orderCode,
				}).then(res => {
					that.goods_info = res.object
					that.popupShow = true
				})
			},

			instantlyPayPage() {
				const that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				balancePaymentByApp({
					customerCode: that.userInfo.customerCode,
					orderCode: that.goods_info.orderCode
				}).then(res => {
					uni.hideLoading()
					// that.queryOrderDetailByApp()
					this.popupShow = false
					uni.navigateBack({
						delta: parseInt(1)
					});
				})
			},

			closePopup() {
				this.popupShow = false
			},

			click(item) {
				console.log('item', item);
			},

			goBackToOrderList() {
				uni.switchTab({
					url: '/pages/order/order'
				});
			}
		},
	};
</script>

<style lang="scss" scopeds>
	page {
		background-color: #f1f3f5;
	}

	.scrollContent {
		//可视高度，需要在多大的盒子中进行滑动
		height: 100vh;
		width: 100%;
	}

	.order_container {
		background-color: #f5f5f5;
		font-family: Source Han Sans CN, Source Han Sans CN-500 !important;
		margin-bottom: 40rpx;

		/deep/ .uni-nav-bar .uni-nav-bar-text {
			font-size: 36rpx !important;
		}

		.title {
			color: #333333;
			font-size: 34rpx;
			font-weight: 500;
		}

		.line {
			width: 12rpx;
			height: 34rpx;
			background: #38d19a;
			border-radius: 3px;
		}

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;


			.content_item {
				width: 700rpx;
				// height: 600rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 16rpx;
				background-color: #fff;
				padding: 40rpx;

				.title_item {
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
				}

				.value_item {
					font-size: 28rpx;
					color: #666666;
					font-weight: 500;
				}
			}
		}


		.time {
			display: flex;
			flex-direction: column;
			align-items: center;

			.time_box {
				width: 700rpx;
				// height: 300rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 16rpx;
				background-color: #fff;
				padding: 40rpx;

				.title_item {
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
				}

				.value_item {
					font-size: 28rpx;
					color: #666666;
					font-weight: 500;
				}
			}

		}

		.address {
			display: flex;
			flex-direction: column;
			align-items: center;

			.address_box {
				width: 700rpx;
				// height: 300rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 16rpx;
				background-color: #fff;
				padding: 40rpx;

				.title_item {
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
				}

				.value_item {
					font-size: 28rpx;
					color: #666666;
					font-weight: 500;
				}
			}

		}

		.center {
			display: flex;
			flex-direction: column;
			align-items: center;

			.center_box {
				width: 700rpx;
				padding: 40rpx;
				background: #ffffff;
				border-radius: 14rpx;
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);

				.center_content {
					border-bottom: 0.5px solid #dadada;
				}

				.center_content:last-child {
					border-bottom: 0px solid #dadada;
					margin-bottom: 0 !important;
					padding-bottom: 0 !important;
				}

				.pro_name {
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
				}

				.pro_amout {
					font-size: 48rpx;
					color: #333333;
					font-weight: 500;
				}
			}
		}

		.pay {
			display: flex;
			flex-direction: column;
			align-items: center;

			.pay_box {
				width: 700rpx;
				padding: 40rpx;
			}

			button {
				display: inline-block;
				width: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

	}

	.myPopup {
		// height: 600rpx;
		box-sizing: border-box;
		padding: 80rpx 60rpx 0 60rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-500;

		.title {
			font-size: 40rpx;
			color: #333333;
			font-weight: 500;
		}

		.content_item {
			font-size: 32rpx;
			color: #666666;
			font-weight: 400;
		}

		.mybutton button {
			width: 50%;
		}
	}
</style>